import React from 'react'
// ===================================================================== antd
import { Layout, Menu, Tree, Dropdown } from 'antd'
import Router from './router'
import './component/css/table-menu.css'
const { DirectoryTree } = Tree;
// ===================================================================== global declare
const { $fn, $http, $Lazy } = window
const { Item } = Menu
// ===================================================================== private template
const Content 				= $Lazy.load(()=>import('@tp/content'))
const confirm 				= $Lazy.file(()=>import('@antd/confirm'))
const FolderRenameModal		= $Lazy.state(()=>import('./component/folder-rename-modal'))
const FolderMoveModal		= $Lazy.state(()=>import('./component/folder-move-modal'))
const NewFolderModal		= $Lazy.state(()=>import('./component/new-folder-modal'))
// ===================================================================== component
class Index extends React.Component {
	state = {
		data: [],
		key: 0,
		selectedKeys: [],
		menuData: [],
		folderData: [],
		expandedKeys:[]
	}
	baseRoot = $fn.getRoot().root
	baseUrl = $fn.getRoot().root +'/workbench/document-manage'
	firUrl = $fn.getRoot().root +'/workbench/document-manage/my-collection'
	componentDidMount(){
		let menuData = []
		let folderData = []
		let expandedKeys = []
		if($fn.local('wdglcd')){
			menuData = $fn.local('wdglcd')
		}else{
			this.getMent()
		}
		if($fn.local('folder')){
			folderData = $fn.local('folder')
		}else{
			this.getFolder()
		}
		const keys = $fn.local('expandedKeys')
		if(keys){
			expandedKeys = keys
		}
		this.setState({ selectedKeys: this.getKey(), menuData, folderData, expandedKeys })
		
		window.refreshFolder = this.getFolder
		
	}
	getMent = () => {
		$http.pull(null,'menu/index',{param:{parent_menu_en:'wdglcd'}}).then(data=>{
			let arr = $fn.copy(data)
			if($fn.hasArray(arr)){
				arr.sort(function(a,b){return a.sort-b.sort})
				arr.forEach(v=>{
					v.path = this.baseRoot + v.new_access_route
					v.component = v.new_access_route.substr(1)
				})
				this.setState({menuData:arr})
				$fn.local('wdglcd',arr)
			}
		})
	}
	getFolder = () => {
		$http.pull(null,'doc-file-folder/folderLists').then(data=>{
			this.setState({folderData:data})
			$fn.local('folder',data)
		})
	}
	onSelect = (v) => {
		this.props.history.push(v.key);
	}
	// 从路由获取 key 值
	getKey(){
		let hash = window.location.hash
		hash = hash.replace('#','')
		const arr = hash?.split('?')[1]?.split('&')[0]?.split('=')

		if(hash === this.baseUrl){
			this.props.history.push(this.firUrl)
			return [ this.firUrl ]
		}else{
			if(hash.indexOf("/folder")!== -1){
				return [arr[1]]
				
			}else{
				return [ hash ]
			}
		}
	}
	
	treeSelect = (keys, info) => {
		const {node} = info
		const folderUrl = `${this.baseUrl}/folder?id=${keys[0]}&title=${node.title}`
		this.props.history.push(folderUrl)
		this.setState({ selectedKeys: this.getKey(keys[0])})
	};
	
	onExpand = (keys, info) => {
		$fn.local('expandedKeys',keys)
		this.setState({expandedKeys:keys})
	}
	
	onRightClick = ({node}) => {		// 文件夹右击事件
		this.folderInfo = node
	}
	
	deleteFolder = (info) => {		// 取消共享
		confirm.then( f => {
			f({
				msg:`是否删除【${info.title}】？`,
				onOk: close => {
					$http.submit(null,'doc-file-folder/del',{ param:{ folder_id:info.key}, loadingText:`删除中`}).then(data=>{
						close()
						$fn.msg.success('删除成功')
						this.getFolder()
					})
				}
			})
		})
	}
	render(){
		const { selectedKeys, menuData, folderData,key,expandedKeys } = this.state
		const menu = () => {
			if(this.folderInfo.key === '0'){
				return <Menu className='bcb'>
					<Item key="1" onClick={()=>this.newFolderModal.open(this.folderInfo.key)}>新建</Item>
				</Menu>
			}else {
				return <Menu className='bcb'>
					<Item key="1" onClick={()=>this.newFolderModal.open(this.folderInfo.key)}>新建</Item>
					<Item key="2" onClick={()=>this.folderRenameModal.open(this.folderInfo)}>重命名</Item>
					<Item key="3" onClick={()=>this.deleteFolder(this.folderInfo)}>删除</Item>
					<Item key="4" onClick={()=>this.folderMoveModal.open(this.folderInfo)}>移动</Item>
				</Menu>
			}
		}
		return (
			<>
				<Layout className='bcb wh'>
					<Layout.Sider className='' width={$fn.menuWidth} id='menu' theme='light' trigger={null} collapsible>
						<Content scrollY>
							<Menu className='' inlineIndent={6} mode='inline' theme='light' selectedKeys={selectedKeys}  onClick={this.onSelect} >
								{$fn.hasArray(menuData) && menuData.map((v,i)=>(
									<Item key={v.path} param={v.id}>{ v.icon && <i className={`iconfont icon${v.icon} rel`} style={{top:1,marginRight:3}}></i>}<span>{v.title}</span>{v.menu_name}</Item>
								))}
							</Menu>
							<div className='oxs scrollbar omit'>
								<div className='menuTree dk'>
									{$fn.hasArray(folderData) && <Dropdown overlay={menu} trigger={['contextMenu']}>
										<DirectoryTree
											selectedKeys={selectedKeys}
											onSelect={this.treeSelect}
											treeData={folderData}
											onRightClick={this.onRightClick}
											expandAction='doubleClick'
											onExpand={this.onExpand}
											expandedKeys={expandedKeys}
										/>
									</Dropdown>}
									{/*<Collapse bordered={false} expandIconPosition='right'expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}>
										<Panel header={panelTitle()} key="1">
											
										</Panel>
									</Collapse>*/}
								</div>
							</div>
						</Content>
					</Layout.Sider>
					{/* 内容 */}
					<section className='ex rel fv h' key={key}>
						<Router data={menuData} />
					</section>
				</Layout>
				{/* 文件夹重命名 */}
				<FolderRenameModal onRef={ref=>this.folderRenameModal=ref} onRefresh={this.getFolder} />
				{/* 文件夹移动 */}
				<FolderMoveModal onRef={ref=>this.folderMoveModal=ref} onRefresh={this.getFolder} />
				{/* 新建文件夹 */}
				<NewFolderModal onRef={ref=>this.newFolderModal=ref} onRefresh={this.getFolder} />
			</>
		)
	}
}
export default Index